<template>
	<el-dialog  v-model="show" title="订单详情" width="1000" align-center>
    <div class="">
          <!-- 搜索条件 -->
          <el-form style="width:100%;display:flex;">
            <el-form-item label="下单日期">
              <el-date-picker  type="date" style="width:260px" placeholder="请输入订单日期"  :suffix-icon="CaretBottom" />
            </el-form-item>
            <el-form-item style="margin-left:20px">
              <el-button round :icon="Search" color="#0071bb">查询</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格数据 -->
			    <div class="tables">
				    <el-table :data="tableData" style="">
				    	<el-table-column prop="order_time" label="下单日期" />
				    	<el-table-column prop="order_no" label="订单号" />
				    	<el-table-column prop="device_name" label="设备名称" />
				    	<el-table-column prop="status" label="订单异常状态" />
				    	<el-table-column prop="handle_time" label="处理时间" />
				    	<el-table-column prop="result" label="处理结果" width="100"/>
				    </el-table>
            <!-- 底部分页 -->
		        <div class="page_number">
		        	<el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize" 
		        		:disabled="!pager.total"  layout="prev, pager, next, jumper,total" :total="pager.total"
		        		@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
		        </div>
			    </div>
        </div>
    <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="submit(ruleFormRef)" color="#0071bb">确定</el-button>
            <el-button @click="close()">取消</el-button>
        </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { CaretBottom, Search } from '@element-plus/icons-vue'
import { defineProps,defineEmits,toRefs } from 'vue';
const emit = defineEmits(['close','submit']);
const props = defineProps<{ formData:any }>();
// 分页
const pager = ref({
	currentPage:1,
	pageSize:10,
	total:10,
})
// 表格数据
const tableData = ref([
  {id:1,order_time:'2024-05-15——09:38:11',order_no:'20214115425225',device_name:'伯克材料3668649',handle_time:'2024-05-23——09:44:32',result:'未付款',status:'未及时付款'},
  {id:2,order_time:'2024-05-15——09:38:11',order_no:'20214115425225',device_name:'伯克材料3668649',handle_time:'2024-05-23——09:44:32',result:'未付款',status:'未及时付款'},
  {id:3,order_time:'2024-05-15——09:38:11',order_no:'20214115425225',device_name:'伯克材料3668649',handle_time:'2024-05-23——09:44:32',result:'未付款',status:'未及时付款'},
])
// 取消
const close = () => {
    emit('close')
}
// 确定
const submit = () => {
  emit('submit')
}
const show = ref<boolean>(true)
</script>

<style lang="scss" scoped>
.df{
    display: flex;
    align-items: center;
}
.fd{
  font-weight:bold;
}
.desc{
  background:#00ffff;
  padding:20px;
  font-size: 12px;
}


    .item{
        margin-top: 15px;
        color: #4D4D4D;
        font-size: 16px;
        position: relative;
        padding: 0 30px;
        box-sizing: border-box;
        .name{
            display: inline-block;
            text-align: right;
        }
        .value{
          margin-left:10px;
        }
        .unit{
          
        }
        .tip{
            margin-left: 20px;
            color: #0071BB;
            font-size:12px;
        }
    }
.dialog-footer{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
}
</style>